<template>
  <view class="car">
    <view class="carphoto">
      <image :src="img" class="img" bindtap="preview"></image>
    </view>
    <view class="carinfo" v-for="item in carinfo" :key="item.pinpai">
      <h1 class="uni-h1">{{item.pinpai}}</h1>
      <view class="one" v-for="item in qiche" :key="item.nengyuan">
        <div class="uni-div">
          <h3 class="uni-h3">能源类型</h3>
          <span class="span">{{item.nengyuan}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">排放量</h3>
          <span class="span">{{item.pailiang}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">结构/座位</h3>
          <span class="span">{{item.jiegou}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">燃油标号</h3>
          <span class="span">{{item.ranyou}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">油箱容积</h3>
          <span class="span">{{item.rongji}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">车门数</h3>
          <span class="span">{{item.chemen}}</span>
        </div>
        <div class="uni-div">
          <h3 class="uni-h3">汽车损坏情况</h3>
          <span class="span">{{item.qingkuang}}</span>
        </div>
      </view>
    </view>
    <h4 class="uni-h4">配置信息</h4>
    <view class="peizhiinfo">
      <label class="label">驻车雷达</label>
      <label class="label">胎压监测功能</label>
      <label class="label">蓝牙/充电口</label>
      <label class="label">远/近光灯</label>
      <label class="label">自动驻车</label>
      <label class="label">一键启动</label>
      <label class="label">自动空调</label>
      <label class="label">空气系统</label>
      <label class="label">座椅</label>
    </view>
    <h5 class="uni-h5">*以上信息仅供参考，请以门店实物为准</h5>
    <view class="yuding">
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        img: '../../static/k-on.jpg',
        carphoto: [{ image: '../../static/k-on.jpg', }, ],
        carinfo: [{ pinpai: '本田凌派', }, ],
        qiche: [{
          nengyuan: '汽油',
          pailiang: '1.0T自动',
          jiegou: '三厢轿车5座',
          ranyou: '92-93汽油',
          rongji: '40L',
          chemen: '4门',
          qingkuang: '无损坏情况',
        }, ],
      }
    },

    async onLoad(option) {
      if (option.id !== undefined) {
        console.log(option.id)
        console.log(option.image)
        this.img = option.image
        console.log(this.img)
        this.carphoto[0].image = option.image
        this.carDetail()
      }
    },
    methods: {
      // 获取 car表的信息
      async carDetail() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/getCarById',
          method: 'POST',
          data: { id: this.id },
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },

        })
        if (res.status === 0) {
          console.log(res)
          this.carinfo[0].pinpai = res.data.C_Brand
          this.carinfo[0].size = '1.0T自动 | 三厢' + res.data.C_Seat + '座'
          this.carinfo[0].image = res.data.C_Image
          this.rentPrice = res.data.C_Price
        }
      },
    }
  }
</script>
<style lang="scss">
  .carphoto .img {
    width: 730rpx;
    height: 300rpx;
    margin: 10rpx;
  }

  .carinfo {
    width: 730rpx;
    height: 240rpx;
    background-color: white;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }

  .carinfo .uni-h1 {
    /*    width: 100%;
    height: 100%; */
    margin-left: 30rpx;
    margin-bottom: 20rpx;
    font-size: 40rpx;
    font-weight: 700;
  }

  .carinfo .one {
    // width: 100%;
    // height: 100%;
    margin-top: -50rpx;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
  }

  .one .uni-div {
    display: inline-block;
    width: 175rpx;
    height: 70rpx;
  }

  .one .uni-div .uni-h3 {
    font-size: 26rpx;
    color: #a9a9a9;
  }

  .one .uni-div .span {
    font-size: 30rpx;
    color: #000000;
  }

  .uni-h4 {
    margin-top: 25rpx;
    margin-left: 10rpx;
    margin-bottom: 5rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  .peizhiinfo {
    width: 730rpx;
    height: 425rpx;
    background-color: white;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }

  .peizhiinfo .label {
    display: inline-block;
    padding-left: 10rpx;
    padding-top: 10rpx;
    font-size: 30rpx;
    font-weight: 700;
    background-color: #b9b9b9;
    width: 200rpx;
    height: 90rpx;
    margin: 20rpx 10rpx 20rpx 20rpx;
  }

  .uni-h5 {
    text-align: center;
    margin-top: 10px;
    margin-left: 10rpx;
    margin-right: 10rpx;
    font-size: 26rpx;
    color: #a9a9a9;
  }

  .yuding {
    width: 750rpx;
    height: 120rpx;
    background-color: #ffffff;
  }
</style>